/*
 * @Author: yuanxiang 
 * @Date: 2018-05-09 11:17:04 
 * @Last Modified by: hy
 * @Last Modified time: 2018-06-21 15:44:03
 */
<template>
  <div class="gq">
      <div class="bg4Con textColor">
        <img class="gqOutViewLogo" src="../../../../../static/img/gq/logomdpi.png">
        <div class="mapCon">
          <gq-map  :areaData="quantity" v-model="buy_items" :placeData="stockAddressArr"></gq-map>
        </div>
        <div class="row topCon">
          <div class="row item">
            <div>
             <!-- <p class="text">累计销售量(吨)<span>/当月</span></p> -->
             <p class="text">累计销售量(吨)<span class="gqSubhead">/当月</span></p>
                <p class="number boldFont">
                  <i-count-up
                  :startVal="startVal"
                  :endVal="sell_all"
                  :decimals="decimals"
                  :duration="duration"
                  :options="options"
                />
                <span>
                      <i class="gqSubhead smallNumber">/</i><i-count-up
                      :startVal="startVal"
                      :endVal="currentMonthOrderWeight"
                      :decimals="decimals"
                      :duration="duration"
                      :options="options"
                      class="gqSubhead smallNumber"
                    />
                </span>
              </p>
            </div>
          </div>
            <div class="itemLine"></div>
          <div class="row item">
            <div>
              <p class="text">累计成交额(元)<span class="gqSubhead">/当月</span></p>
                <p class="number boldFont">
                  <i-count-up
                  :startVal="startVal"
                  :endVal="sell_nums"
                  :decimals="decimals"
                  :duration="duration"
                  :options="options"
                />
                <span>
                      <i class="gqSubhead smallNumber">/</i><i-count-up
                      :startVal="startVal"
                      :endVal="currentMonthPayMoney"
                      :decimals="decimals"
                      :duration="duration"
                      :options="options"
                      class="gqSubhead smallNumber"
                    />
                </span>
              </p>
            </div>
          </div>
            <div class="itemLine"></div>
          <div class="row item">
            <div>
              <p class="text">累计利润(元)<span class="gqSubhead">/当月</span></p>
                <p class="number boldFont">
                  <i-count-up
                  :startVal="startVal"
                  :endVal="sell_Money"
                  :decimals="decimals"
                  :duration="duration"
                  :options="options"
                />
                <span>
                      <i class="gqSubhead smallNumber">/</i><i-count-up
                      :startVal="startVal"
                      :endVal="currentMonthGrossProfitAmount"
                      :decimals="decimals"
                      :duration="duration"
                      :options="options"
                      class="gqSubhead smallNumber"
                    />
                </span>
              </p>
            </div>
            <div>
            </div>
          </div>
        </div>
        <div class="topLeftCon">
          <div class="shipmentDataTop">
              <p class="title"><i></i>用户量统计(人)</p>
          </div>
          <chart :chartStyle="'min-height:280px;height:300px'"  :option="userNumberOption" />
        </div>
        <div class="bottomLeftCon">
          <div class="shipmentDataTop">
              <p class="title"><i></i>计划单统计</p>
          </div>
          <div class="row planChartCon">
            <div class="planChartItem">
              <p class="leftText">当月 <span>{{currentMonth}}%</span></p>
              <chart :chartStyle="'min-width:100px;min-height:390px;height:390px'" :option="mouthPlanOption" />
            </div>
            <div class="planChartItem">
              <p class="rightText">当周<span>{{currentWeek}}%</span></p>
              <chart :chartStyle="'min-width:100px;min-height:390px;height:390px'"  :option="weekPlanOption" />
            </div>
          </div>
        </div>
        <div class="topRightCon">
          <div class="shipmentDataTop">
              <p class="title"><i></i>当月分公司销量及利润</p>
          </div>
          <chart  :chartStyle="'min-height:300px'"  :option="branchOfficeOption" />
        </div>
        <div class="bottomRightCon">
          <div class="shipmentDataTop">
              <p class="title"><i></i>品类当月采销统计</p>
              <el-select class="selectCon" @change="fetchGrossProfit"  v-model="pickDefault">
                <el-option v-for="item in pickArr" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
    					</el-select>
          </div>
          <chart  :chartStyle="'min-height:300px'"  :option="grossProfitOption" />
        </div>
      </div>
  </div>
</template>
<script>
import echarts from "echarts";
import chart from "@/components/Charts/newChart";
import gqMap from "@/components/gq/gqMap";
import ICountUp from "vue-countup-v2";
import {
  GetPlanOrderReportListByToday,
  GetDataByTarget,
  GetWarehouseSupplierLatLngList,
  GetHomePageDataForInner,
  GetCustomerInfo,
  GetProductDetailList,
  GetPlanOrderStatistics
} from "@/api/gq/index";
const lineCircle =
  "";

export default {
  name: "index",
  components: { chart, gqMap, ICountUp },
  mounted() {
    this.fetchData();
  },
  data() {
    return {
      pickArr: [
        {
          label: "采购量",
          value: "24027"
        },
        {
          label: "销量",
          value: "24028"
        }
      ],
      isTest: this.$utils.gqIsTestTure, //  是否测试数据 ture  测试数据  false 正式数据
      pickDefault: "24027",
      currentWeek: 0, // 当周上浮
      currentMonth: 0, // 当月上浮
      grossProfitOption: {}, // 吨钢毛利
      branchOfficeOption: {}, // 当月分公司销量和利润
      mouthPlanOption: {}, // 月计划单统计
      weekPlanOption: {}, // 周计划单统计
      userNumberOption: {}, // 用户量统计
      quantity: [], // 发单量
      stockAddressArr: [], // 供应商、库存数据
      buy_items: [],
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      groupPlate: "9004",
      sell_all: 0,
      sell_nums: 0,
      sell_Money: 0,
      get_allmoney: 0,
      currentMonthGrossProfitAmount: 0,
      currentMonthOrderWeight: 0,
      currentMonthPayMoney: 0,
      allUserNumber: 0 // 用户总数
    };
  },
  methods: {
    //  基础数据
    async fetchBaseData() {
      const paramsData = {
        isTest: this.isTest
      }
      try {
        var res = await GetHomePageDataForInner(paramsData);
        if (res.data.code === "0") {
          const result = res.data.result;
          this.sell_Money = result.sumGrossProfitAmount; // 累计利润
          this.sell_all = result.sumOrderWeight; // 累计销售量
          this.sell_nums = result.sumPayMoney; // 累计成交额
          this.currentMonthGrossProfitAmount = result.currentMonthGrossProfitAmount; // 当月利润
          this.currentMonthOrderWeight = result.currentMonthOrderWeight; // 当月销售量
          this.currentMonthPayMoney = result.currentMonthPayMoney; // 当月成交额
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 吨钢毛利
    async fetchGrossProfit() {
      try {
        const res = [];
        const paramspl = {
          productType: "7001", // 盘螺
          queryType: this.pickDefault,
          isTest: this.isTest
        };
        const respl = await GetProductDetailList(paramspl);
        if (respl.data.code === "0") {
          for (let index = 0; index < respl.data.result.length; index++) {
            var obj = {
              list: [],
              name: ""
            };
            for (let i = 0; i < 4; i++) {
              var listObj = {
                name: "",
                value: 0
              };
              obj.list.push(listObj);
            }
            res.push(obj);
          }
          respl.data.result.forEach((item, index) => {
            res[index].name = item.xData;
            res[index].list[0].name = "盘螺";
            res[index].list[0].value = item.value;
          });
        }
        const paramsxc = {
          productType: "7002", // 线材
          queryType: this.pickDefault,
          isTest: this.isTest
        };
        const resxc = await GetProductDetailList(paramsxc);
        if (resxc.data.code === "0") {
          resxc.data.result.forEach((item, id) => {
            res[id].list[1].name = "线材";
            res[id].list[1].value = item.value;
          });
        }
        const paramslw = {
          productType: "7003", // 螺纹
          queryType: this.pickDefault,
          isTest: this.isTest
        };
        const reslw = await GetProductDetailList(paramslw);
        if (reslw.data.code === "0") {
          reslw.data.result.forEach((item, idlw) => {
            res[idlw].list[2].name = "螺纹";
            res[idlw].list[2].value = item.value;
          });
        }
        const paramsgp = {
          productType: "7004", // 钢坯
          queryType: this.pickDefault,
          isTest: this.isTest
        };
        const resgp = await GetProductDetailList(paramsgp);
        if (resgp.data.code === "0") {
          resgp.data.result.forEach((item, idGq) => {
            res[idGq].list[3].name = "钢坯";
            res[idGq].list[3].value = item.value;
          });
        }
        this.initGrossProfitChart(res);
      } catch (error) {
        console.log(error);
      }
    },
    initGrossProfitChart(res) {
      var xData = [];
      var allData = [];
      var legend = [];
      var unit = "";
      var listLength = res[0].list.length;
      for (let i = 0; i < listLength; i++) {
        var data = {
          data: [],
          type: "line",
          symbol: "rect",
          name: ""
        };
        allData.push(data);
      }
      const color = ["#da34fb", "#0c43fd", "#2ff0d2", "#8d4cfd", "#31cee6"];
      res[0].list.forEach((listItem, index) => {
        allData[index].name = listItem.name;
        var legendObj = {
          name: listItem.name,
          textStyle: {
            color: color[index],
            fontSize: 14
          }
        };
        legend.push(legendObj);
      });
      res.forEach(resItem => {
        xData.push(resItem.name);
        resItem.list.forEach((listItem, id) => {
          allData[id].data.push(listItem.value);
        });
      });
      var option = {
        xAxis: {
          data: xData,
          axisLabel: {
            rotate: 45,
            formatter: function(value, index) {
              return "{value|" + value + "}";
            }
          }
        },
        legend: {
          data: legend,
          orient: "horizontal",
          bottom: 0,
          top: "bottom"
        },
        tooltip: {
          axisPointer: {
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                  }
                ]
              }
            }
          },
          formatter: params => this.$utils.formatterLine(res, params, unit)
        },
        grid: {
          bottom: "18%",
          left: "15%",
          right: "12%"
        },
        series: allData
      };
      this.$set(this, "grossProfitOption", option);
    },
    // 分公司利润和销量
    async fetchBranchOffice() {
      try {
        const params = {
          queryType: "24025", // 分公司销量
          timeType: "3008",
          isTest: this.isTest
        };
        const res = await GetDataByTarget(params);
        const paramsMoney = {
          queryType: "24026", // 分公司利润
          timeType: "3008",
          isTest: this.isTest
        };
        const resMoney = await GetDataByTarget(paramsMoney);
        if (res.data.code === "0") {
          const result = res.data.result.list;
          const resultMoney = resMoney.data.result.list;
          this.initBranchOfficeChart(result, resultMoney);
        }
      } catch (error) {
        console.log(error);
      }
    },
    initBranchOfficeChart(res, resMoney) {
      var xData = [];
      var unit = "";
      var symbolClip = true;
      var max = 0;
      var data1 = {
        type: "bar",
        name: "销量",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#31cee6"
              },
              {
                offset: 1,
                color: "#0c43fd"
              }
            ])
          }
        },
        z: 10,
        symbolBoundingData: max,
        data: [],
        barWidth: 21
      };
      var data2 = {
        data: [],
        name: "利润",
        type: "line",
        smooth: true,
        itemStyle: {
          normal: {
            color: "#0c43fd",
            label: {
              show: true,
              position: "top"
            }
          }
        },
        yAxisIndex: 1,
        symbol: "image:// " + lineCircle,
        barWidth: 20
      };
      resMoney.forEach(item => {
        var obj = {};
        obj.value = item.value;
        obj.symbolClip = symbolClip;
        data2.data.push(obj);
      });
      var legend = [
        {
          name: "销量",
          textStyle: {
            color: "#31cee6",
            fontSize: 14
          }
        },
        {
          name: "利润",
          textStyle: {
            color: "#31cee6",
            fontSize: 14
          }
        }
      ];
      res.forEach(item => {
        xData.push(item.name);
        var obj = {};
        max = Number(item.value) > max ? Number(item.value) : max;
        obj.value = item.value;
        obj.symbolClip = symbolClip;
        data1.data.push(obj);
      });
      data1.symbolBoundingData = max;
      var option = {
        xAxis: {
          data: xData,
          axisLabel: {
            rotate: 45,
            formatter: function(value, index) {
              return "{value|" + value + "}";
            }
          }
        },
        legend: {
          data: legend,
          top: "0",
          right: "0",
          orient: "horizontal"
        },
        tooltip: {
          axisPointer: {
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                  }
                ]
              }
            }
          },
          formatter: params => this.$utils.formatterLine(res, params, unit)
        },
        grid: {
          bottom: "20%",
          left: "8%",
          right: "12%"
        },
        yAxis: [
          {
            name: "销量(吨)",
            splitNumber: 2,
            nameTextStyle: {
              color: "#31cee6"
            },
            axisLabel: {
              color: "#31cee6",
              fontSize: 12,
              show: true
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#262544"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(49,206,230,0.2)",
                type: "dashed",
                width: "2"
              }
            }
          },
          {
            name: "利润(元)",
            splitNumber: 2,
            nameTextStyle: {
              color: "#31cee6",
              padding: [0, 0, 0, 50]
            },
            axisLabel: {
              color: "#31cee6",
              fontSize: 12,
              show: true
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#262544"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(49,206,230,0.2)",
                type: "dashed",
                width: "2"
              }
            }
          }
        ],
        series: [data1, data2]
      };
      this.$set(this, "branchOfficeOption", option);
    },
    // 计划单统计
    async fetchPlanOption() {
      const paramsData = {
        isTest: this.isTest
      }
      try {
        const res = await GetPlanOrderStatistics(paramsData);
        if (res.data.code === "0") {
          // 上月当月
          const result = res.data.result;
          var resMounth = [
            { name: "上月", value: result.lastMonthOrderWeight },
            { name: "当月", value: result.currentMonthOrderWeight }
          ];
          // 当月上浮
          if (Number(result.currentMonthIncrease) > 0) {
            this.currentMonth = "+" + result.currentMonthIncrease;
          }
          // 当周上浮
          if (Number(result.currentWeekIncrease) > 0) {
            this.currentWeek = "+" + result.currentWeekIncrease;
          }
          var resWeek = [
            { name: "上周", value: result.lastWeekOrderWeight },
            { name: "本周", value: result.currentWeekOrderWeight }
          ];
          this.setBarOption("mouthPlanOption", resMounth);
          this.setBarOption("weekPlanOption", resWeek);
        }
      } catch (error) {
        console.log(error);
      }
    },
    //  用户量统计
    async fetchUserNumber() {
      const paramsData = {
        isTest: this.isTest
      }
      try {
        var res = await GetCustomerInfo(paramsData);
        if (res.data.code === "0") {
          const result = res.data.result;
          const resData = [];
          resData[0] = { xData: "今日新增", value: result.newlyAddedToday };
          resData[1] = { xData: "本月新增", value: result.newlyAddedMonth };
          this.allUserNumber = result.sumCustomer; //  用户总数
          this.setOption("userNumberOption", resData);
        }
      } catch (e) {
        console.log(e);
      }
    },
    //  获取库房供应商的坐标
    async fetchStockAddress() {
      const paramsData = {
        isTest: this.isTest
      }
      try {
        var res = await GetWarehouseSupplierLatLngList(paramsData);
        var newArr = [];
        var newSupplierArr = [];
        var newWarehoustArr = [];
        if (res.data.code === "0") {
          var result = res.data.result;
          result.supplierList.forEach(item => {
            var obj = {
              name: item.city,
              value: [item.lng, item.lat],
              label: {
                normal: {
                  formatter: "{b}",
                  right: "20%",
                  show: true,
                  fontSize: "10",
                  color: "#0c43fd"
                }
              },
              itemStyle: { normal: { color: "#3CF1DE" }}
            };
            newSupplierArr.push(obj);
          });
          //   供应商
          result.warehouseList.forEach(item => {
            var obj = {
              name: item.city,
              value: [item.lng, item.lat],
              label: {
                normal: {
                  formatter: "{b}",
                  right: "20%",
                  show: true,
                  fontSize: "10",
                  color: "#3CF1DE"
                }
              },
              itemStyle: { normal: { color: "#0c43fd" }}
            };
            newWarehoustArr.push(obj);
          });
          newArr = newSupplierArr.concat(newWarehoustArr);
          this.stockAddressArr = newArr;
        }
      } catch (e) {
        console.log(e);
      }
    },
    async fetchGetPlanOrderReportListByToday() {
      try {
        var params = {
          groupPlate: this.groupPlate,
          isTest: this.isTest
        };
        var res = await GetPlanOrderReportListByToday(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          this.buy_items = result.list;
          this.quantity = result.listCount;
        }
      } catch (e) {
        console.log(e);
      }
    },
    setBarOption(optionName, res) {
      var xData = [];
      var unit = "";
      var symbolClip = true;
      var max = 0;
      var data1 = {
        type: "bar",
        name: "",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#31cee6"
              },
              {
                offset: 1,
                color: "#0c43fd"
              }
            ])
          }
        },
        symbolBoundingData: max,
        data: [],
        barWidth: 21
      };
      res.forEach(item => {
        xData.push(item.name);
        var obj = {};
        max = Number(item.value) > max ? Number(item.value) : max;
        obj.value = item.value;
        obj.symbolClip = symbolClip;
        data1.data.push(obj);
      });
      data1.symbolBoundingData = max;
      var option = {
        xAxis: {
          data: xData,
          axisLabel: {
            rotate: 45,
            formatter: function(value, index) {
              return "{value|" + value + "}";
            }
          }
        },
        legend: {
          show: false
        },
        tooltip: {
          axisPointer: {
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                  }
                ]
              }
            }
          },
          formatter: params => this.$utils.formatterModal(res, params, unit)
        },
        grid: {
          bottom: "45%"
        },
        series: [data1]
      };
      this.$set(this, optionName, option);
    },
    setOption(optionName, res) {
      var unit = "人";
      var seriesObj = {
        type: "pie",
        data: []
      };
      res.forEach(item => {
        var obj = {};
        obj.name = item.xData;
        obj.value = item.value;
        seriesObj.data.push(obj);
      });
      var option = {
        color: ["#8d4cfd", "#31cee6"],
        tooltip: {
          formatter: params => this.$utils.formatterPieTwo(res, params, unit)
        },
        grid: {
          top: 0
        },
        title: {
          text: "总用户数量",
          subtext: this.allUserNumber
        },
        legend: {
          show: false
        },
        series: [seriesObj]
      };
      this[optionName] = option;
    },
    fetchData() {
      // 对内大屏数据汇总
      this.fetchBaseData();
      // 吨钢毛利
      this.fetchGrossProfit();
      // 分公司利润和销量
      this.fetchBranchOffice();
      // 用户量统计
      this.fetchUserNumber();
      // 计划单统计
      this.fetchPlanOption();
      //  、获取库房供应商的坐标
      this.fetchStockAddress();
      this.fetchGetPlanOrderReportListByToday();
    }
  }
};
</script>
<style>
@import "../../../../styles/element-ui/select.css";
</style>
<style scoped>
.gqSubhead{
  color: #31cee6;
}
.selectCon {
  position: absolute;
  right: 10px;
  z-index: 100;
  width: 100px;
}
.bottomRightCon {
  position: absolute;
  right: 50px;
  top: 590px;
  height: 396px;
  width: 643px;
  background: url("../../../../../static/img/gq/gqOutViewxRightItemTopBg.png")
    left top no-repeat;
  background-size: 100% 100%;
}
.topRightCon {
  position: absolute;
  right: 50px;
  top: 170px;
  height: 396px;
  width: 643px;
  background: url("../../../../../static/img/gq/gqOutViewxRightItemTopBg.png")
    left top no-repeat;
  background-size: 100% 100%;
}
.shipmentDataTop .title i {
  display: inline-block;
  width: 3px;
  height: 15px;
  margin-right: 5px;
  background-color: #2ff0d2;
}
.shipmentDataTop {
  font-size: 18px;
  padding: 40px 0 0 40px;
}
.bottomLeftCon {
  position: absolute;
  left: 50px;
  top: 600px;
  width: 439px;
  height: 363px;
  margin-top: 20px;
  background: url("../../../../../static/img/gq/xiaoshou.png") left top
    no-repeat;
  background-size: 100% 100%;
}
.topLeftCon {
  position: absolute;
  left: 50px;
  top: 220px;
  width: 439px;
  height: 363px;
  margin-top: 20px;
  background: url("../../../../../static/img/gq/xiaoshou.png") left top
    no-repeat;
  background-size: 100% 100%;
}
.topCon .item {
  margin-top: 10px;
  justify-content: center;
  width: 33%;
}
.topCon {
  position: absolute;
  left: 50px;
  top: 20px;
  justify-content: space-around;
  align-items: center;
  width: 1160px;
  height: 193px;
  background-image: url("../../../../../static/img/gq/neibu_top.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.itemLine {
  width: 1px;
  height: 120px;
  background: rgba(47, 240, 210, 0.3);
}
.blodText {
  margin-left: 15px;
  font-size: 28px;
  vertical-align: sub;
}
.planChartItem {
  width: 50%;
  text-align: center;
}
.planChartItem .leftText {
  position: absolute;
  left: 17%;
  top: 23%;
}
.planChartItem .rightText {
  position: absolute;
  left: 64%;
  top: 23%;
}
.shipmentData {
  padding: 40px 0 0 40px;
}
.shipmentData .title {
  display: flex;
  align-items: center;
}
.row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.gqOutViewLogo {
  position: absolute;
  top: 50px;
  width: 107px;
  height: 40px;
  right: 50px;
  z-index: 99;
}
.mapCon {
  position: fixed;
  top: 0;
  right: 0;
}
.boldFont {
  margin-top: 6pt;
}
.bg4Con {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-image: url("../../../../../static/img/bigData4/bg4.jpg"); */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 1080px;
}
.topCon .text span {
  font-size: 15px;
  margin-left: 10px;
}
.topCon .text {
  font-size: 25px;
}
.topCon .item .number span {
  font-size: 60px;
  font-family: DIN Condensed Bold;
}
.topCon .item .number span:nth-of-type(2)
  span{
  font-size: 30px;
  font-family: DIN Condensed Bold;
}
.topCon .item .number span:nth-of-type(2)
  i{
  margin-right: 5px;
  margin-left: 5px;
  font-style: normal;
  font-size: 40px !important;
}
</style>